<template>
  <div class="headers">
    <div class="left-flod">
      <div class="btnFlot" @click="foldBtn">
        <i :class="fold"></i>
      </div>
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>
            {{$route.meta.title}}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div v-if="DaysRemaining<='3'&&DaysRemaining>'0'" class="headers-center">
      <p>会员即将到期，未避免不必要损失，请及时续费，或手动暂停策略</p>
    </div>
    <div class="headers-right">
      <p>会员有效期:{{userTime}}</p>
      <img class="logo"src="@/assets/login/logo.jpg"/>
      <div>
        <el-dropdown :hide-on-click="true">
           <span class="el-dropdown-link">
           {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
           </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="updateUserPwd()">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="deleteToken()">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <el-dialog
      title="修改密码"
      :visible.sync="upadtedialogVisible"
      width="500px">
      <el-form :model="updateUserForm"   :rules="rules" ref="updateUserForm" label-width="100px" class="demo-ruleForm">
        <el-form-item
          label="旧密码"
          prop="oldPwd"
        >
          <el-input v-model="updateUserForm.oldPwd" show-password type="password"></el-input>
        </el-form-item>
        <el-form-item
          label="新密码"
          prop="newPwd"
        >
          <el-input v-model="updateUserForm.newPwd" show-password type="password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="upadtedialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateSure('updateUserForm')">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {ajax} from "@/config/strategy";
import JSEncrypt from "jsencrypt";
export default {
  name: 'header',
  data () {
    return {
      DaysRemaining:null,
      userTime: null,
      username:null,
      fold:'el-icon-s-fold',
      upadtedialogVisible:false,
      updateUserForm:{
        userName:localStorage.getItem('userName'),
        oldPwd:'',
        newPwd:''
      },
      rules: {
        oldPwd: [
          { required: true, message: '请输入旧密码', trigger: 'change' }
        ],
        newPwd: [
          { required: true, message: '请输入新密码', trigger: 'change' }
        ],
      }
    }
  },
  methods: {
    // 查询当前用户登录信息
    getUserToken(){
      ajax.getOneByToken().then(res=>{
        const {code}=res
        if (code=='00000'){
          localStorage.setItem('UserTime',res.data.expirationTime)
          this.userTime=this.$moment(localStorage.getItem('UserTime')).format("YYYY-MM-DD")
          this.remainingDays()
        }

      })
    },
    remainingDays() {
      const now = this.$moment();
      const endOfDay = this.$moment(this.userTime).endOf('day');
      this.DaysRemaining=endOfDay.diff(now, 'days')
    },
    updateUserPwd(){
        this.upadtedialogVisible=true
    },
    RSAgetPass(pas) {
      const rsa = new JSEncrypt();
      rsa.setPublicKey(this.$store.state.user.publicKey);
      console.log('加密：' + rsa.encrypt(pas))
      return rsa.encrypt(pas)
    },
    updateSure(formName){
      this.$refs[formName].validate((valid) => {
        if (valid){
          const pms={
            userName:localStorage.getItem('userName'),
            oldPwd:this.RSAgetPass(this.updateUserForm.oldPwd),
            newPwd:this.RSAgetPass(this.updateUserForm.newPwd),
          }
          ajax.updatePwd(pms).then(res=>{
            const {code,msg}=res.data
            if (code=='00000'){
              this.$message.success(msg)
              this.updateUserForm={
                username:localStorage.getItem('userName'),
                oldPwd:'',
                newPwd:''
              }
              this.upadtedialogVisible=false
            }else {
              this.$message.error(msg)
            }
          })
        }
      })

    },
    foldBtn(){
      if (this.fold=='el-icon-s-fold'){
        this.fold='el-icon-s-unfold'
        this.$store.state.user.flod=true
      }else {
        this.fold='el-icon-s-fold'
        this.$store.state.user.flod=false
      }
      console.log(this.$store.state.user.flod,'console.log(this.$store)')
    },
    deleteToken(){
      localStorage.clear();
      this.$message.warning('您已退出登陆');
      setTimeout(()=>{
        this.$router.push('/login')
      },1500)
    }
  },
  async mounted () {
    this.username=sessionStorage.getItem('username')
  await  this.remainingDays()
  await   this.getUserToken()
  }
}
</script>

<style scoped lang="scss">
.btnFlot{
  cursor: pointer;
}
.headers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  h2 {
    text-align: center;
    flex: 1;
    margin: 0;
  }
.left-flod{
  display: flex;
  align-items: center;
  justify-content: space-between;
  i{
    margin-right: 10px;
  }
}
  .headers-center{
    p{
      margin-right: 20px;
      //border: 1px solid ;
      padding: 5px 10px;
      border-radius: 5px;
      background-color: #fef0f0;
      font-size: 14px;
      color: #f78585;
    }
  }
  .headers-right {
    display: flex;
    align-items: center;
    justify-content: center;
    p{
      margin-right: 20px;
      //border: 1px solid ;
      padding: 5px 10px;
      border-radius: 5px;
      //background-color: #fef0f0;
      font-size: 12px;
      color: #888;
    }
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
}
</style>
